<template>
    <view class="content">
      <view style="margin-top: 120rpx;"></view>
      <!-- 页签切换 -->
      <view class="time-tabs">
          <view 
            class="tab-item" 
            :class="{active: currentTab === 0}"
            @click="onTabChange({currentIndex: 0})"
          >消费记录</view>
          <view 
            class="tab-item" 
            :class="{active: currentTab === 1}"
            @click="onTabChange({currentIndex: 1})"
          >提成记录</view>
      </view>
      
      <!-- 消费记录页签 -->
      <view v-if="currentTab === 0">
        <uni-pagination 
          :current="consumptionPagination.page" 
          :pageSize="consumptionPagination.limit"
          :total="consumptionPagination.total"
          @change="handleConsumptionPageChange"
        />
        <view class="record-list">
          <view class="record-item" v-for="item in consumptionList" :key="item.id">
            <view class="record-info">
              <text class="record-date">{{ formatDateTime(item.consumption_date) }}</text>
              <text class="record-amount">金额: ¥{{ item.amount_used }}</text>
              <view v-if="item.transaction_type === 4 && item.product" class="product-info">
                <text class="product-name">{{ item.product.name }}</text>
                <text class="product-price strike">原价: ¥{{ item.product.price }}</text>
              </view>
            </view>
            <text class="record-type">{{ getTransactionTypeName(item.transaction_type) }}</text>
          </view>
        </view>
      </view>
  
      <!-- 提成记录页签 -->
      <view v-if="currentTab === 1">
        <uni-pagination 
          :current="commissionPagination.page" 
          :pageSize="commissionPagination.limit"
          :total="commissionPagination.total"
          @change="handleCommissionPageChange"
        />
        <view class="record-list">
          <view class="record-item" v-for="item in commissionList" :key="item.id">
            <view class="record-info">
              <text class="record-date">{{ formatDateTime(item.consumption_date) }}</text>
              <text class="record-amount">提成: ¥{{ item.amount_used }}</text>
            </view>
            <text class="record-type">{{ getTransactionTypeName(item.transaction_type) }}</text>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  import cardConsumptions from '@/utils/card_consumptions.js';
  import Util from '@/utils/util.js';
  
  export default {
    data() {
      return {
        currentTab: 0,
        storeId: '',
        userId: '',
        consumptionList: [],
        commissionList: [],
        consumptionPagination: {
          page: 1,
          limit: 10,
          total: 0
        },
        commissionPagination: {
          page: 1,
          limit: 10,
          total: 0
        }
      };
    },
    
    onLoad(options) {
      this.storeId = options.store_id;
      this.userId = options.user_id;
      this.loadData();
    },
    
    methods: {
      formatDateTime(date) {
        return Util.formatDateTime(date);
      },
      onTabChange(e) {
        this.currentTab = e.currentIndex;
        this.loadData();
      },
      
      async loadData() {
        if (this.currentTab === 0) {
          await this.loadConsumptions();
        } else {
          await this.loadCommissions();
        }
      },
      
      async loadConsumptions() {
        try {
          const params = {
            page: this.consumptionPagination.page,
            limit: this.consumptionPagination.limit,
            store_id: this.storeId,
            user_id: this.userId
          };
          const res = await cardConsumptions.getUserConsumptions(params);
          this.consumptionList = res.list || [];
          this.consumptionPagination.total = res.total || 0;
        } catch (error) {
          uni.showToast({
            title: '获取消费记录失败',
            icon: 'none'
          });
        }
      },
      
      async loadCommissions() {
        try {
          const params = {
            page: this.commissionPagination.page,
            limit: this.commissionPagination.limit,
            store_id: this.storeId,
            staff_id: this.userId
          };
          const res = await cardConsumptions.getStaffCommissions(params);
          this.commissionList = res.list || [];
          this.commissionPagination.total = res.total || 0;
        } catch (error) {
          uni.showToast({
            title: '获取提成记录失败',
            icon: 'none'
          });
        }
      },
      
      handleConsumptionPageChange(e) {
        this.consumptionPagination.page = e.current;
        this.loadConsumptions();
      },
      
      handleCommissionPageChange(e) {
        this.commissionPagination.page = e.current;
        this.loadCommissions();
      },
      
      getTransactionTypeName(type) {
        const types = {
          1: '卡包充值',
          2: '成本支出',
          3: '现金消费',
          4: '卡包消费',
          5: '卡包提成',
          6: '业务提成'
        };
        return types[type] || '未知类型';
      }
    }
  };
  </script>
  
  <style>
  .content {
    padding: 20rpx;
  }
  
  .record-list {
    margin-top: 20rpx;
  }
  
  .record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    background: #fff;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
  }
  
  .record-info {
    display: flex;
    flex-direction: column;
  }
  
  .record-date {
    font-size: 28rpx;
    color: #666;
  }
  
  .record-amount {
    font-size: 32rpx;
    color: #333;
    margin-top: 10rpx;
  }
  
  .record-type {
    font-size: 28rpx;
    color: #007AFF;
  }
  
  .product-info {
    margin-top: 10rpx;
  }
  
  .product-name {
    font-size: 28rpx;
    color: #666;
  }
  
  .product-price {
    font-size: 28rpx;
    color: #999;
    margin-left: 20rpx;
  }
</style>